<template>
    <div>


      <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose">
      <!-- 内容 -->
     <div>
        <el-col :span="15">  <el-input v-model="gaocha.caseNo" placeholder="案号搜索"></el-input></el-col>
     <el-button type="primary" plain @click="gaojijiansuo">检索</el-button>
     </div>
     <div>
        <el-table
      :data="tableData"
      style="width: 100%"
     >
         <el-table-column
        prop="caseNo"
        label="选择"
        width="180">
        <template  slot-scope="scope"  >
  <el-button type="success" icon="el-icon-check" circle @click="to(scope.$index, scope.row)" ></el-button>
        </template>
    </el-table-column>
    <el-table-column
        prop="caseNo"
        label="案号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="caseWtr"
        label="委托人">
    </el-table-column>
    <el-table-column
        prop="caseOppositeParties"
        label="对方当事人">
    </el-table-column>
        <el-table-column
        prop="userRealname"
        label="承办律师">
        <template>
          {{gaocha.userid}}
        </template>
    </el-table-column>
       <el-table-column
        prop="collectionTime"
        label="收案日期">
    </el-table-column>

  <!--结束-->


  <!--结束-->
</el-table>
  <!--分页-->
<!-- 分页组件 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="gaocha.currentPage"
:page-sizes="[5, 15, 20]"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>

  <!--分页结束-->
     </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>

      </span>
    </el-dialog>








      <el-row>
        <el-col :span="2.5">
          <b>|日志编辑</b>
        </el-col>
     </el-row>
    <hr>

    <el-form ref="form" label-width="80px">


      <el-row>
        <el-col :span="8">
      <el-form-item label="日志类型:">
        <el-select  label="--请选择--"  v-model="logtypeId" @change="fuzi">
      <el-option  v-for="(group,index) in lop" :key="index" :label="group.logTypeLogname"  :value="group.id+''"></el-option>


          </el-select>
          </el-form-item>
    </el-col>
    <el-col :span="8">

        <el-form-item label="详细类别:">
          <el-select  label="--请选择--"  v-model="firstlist.logtypeId" >
      <el-option  v-for="(group,index) in lopzi" :key="index"  :label="group.logTypeLogname" :value="group.id+''"></el-option>


            </el-select>
      </el-form-item>

   </el-col>
      </el-row>


      <el-row>
        <el-col :span="8">
      <el-form-item label="案件:" >


  <el-input
    placeholder="选择案件"
    v-model="firstlist.anhao"
 >
    <i slot="prefix" class="el-input__icon el-icon-search"  @click="dialogVisible = true"></i>
  </el-input>


 <el-input
   v-show="false"
    v-model="firstlist.caseLawId"
 >

  </el-input>







          </el-form-item>
    </el-col>
    <el-col :span="8">


  <el-form-item label="客户名称:">
    <el-input   v-model="client"    readonly></el-input>
      </el-form-item>

    </el-col>
      </el-row>


      <el-row>
        <el-col :span="8">
      <el-form-item label="开始时间:">
        <el-input v-model="firstlist.joblogStarttime" type="date" @change="shijian"></el-input>
          </el-form-item>
    </el-col>
    <el-col :span="8">
        <el-form-item label="结束时间:">
        <el-input v-model="firstlist.joblogEnddtime" type="date"  @change="shijian"></el-input>
      </el-form-item>
    </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
      <el-form-item label="自报时长(时):">
        <el-input v-model="firstlist.joblogReportedtime" ></el-input>
          </el-form-item>
    </el-col>
    <el-col :span="8">
        <el-form-item label="跟新时间:">
        <el-input v-model="firstlist.joblogUpdatetime" type="date"></el-input>
      </el-form-item>
    </el-col>
      </el-row>




      <el-row>
        <el-col :span="8">
      <el-form-item label="公开状态:">
      <el-radio-group v-model="firstlist.joblogStatus">
          <el-radio label="N"   >未公开</el-radio>
          <el-radio  label="Y" >公开</el-radio>
     </el-radio-group>
    <br>
        <font color='red'><b>提示:公开后,客户可通过自主查询来查询服务记录</b></font>
      </el-form-item>
    </el-col>
    <el-col :span="8">
        <el-form-item label="相关文件:">
          <el-upload
          class="upload-demo"
          action=""
          :http-request="submitUpload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :before-upload="beforeUpload"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          list-type="picture-card"
          :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb
            <el-input  v-model="firstlist.joblogFile"  v-show="false"></el-input>
          </div>
        </el-upload>


      </el-form-item>
    </el-col>
      </el-row>

     <el-row>

    <el-col :span="20">
        <el-form-item label="工作描述:">
       <el-input v-model="firstlist.joblogText" type="textarea"></el-input>
      </el-form-item>
    </el-col>
      </el-row>
      <el-col :span="1">
      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">立即提交</el-button>
      </el-form-item>
    </el-col>



           </el-form>
            </div>
    </template>

    <script>
    export default {
      name: "LogJobtianjia",
      data(){
        return{
             tableData: [],
             total :0,
    gaocha:{
      currentPage:1, //初始页
      pageSize:5,    //    每页的数据
      userid :JSON.parse(localStorage["user"])[0].userRealname,
      caseNo: "" //案号

    },
            logtypeId :"" ,//父id 渲染子数据
          client:"" ,//客户名称
                   firstlist: {
                    whatisPerson:JSON.parse(localStorage["user"])[0].id , //用户id
                    logtypeId:"", //详细类别
                    caseLawId:"",      //案件id
                clientId:"", //客户id
                joblogStarttime:"",//开始时间
                joblogEnddtime:"",//结束时间
                joblogReportedtime:"",//自报时长
                joblogUpdatetime:"",//跟进时间
                joblogFile:"",//文件上传
                joblogText:"",//工作描述
                joblogStatus:"N",//状态
                joblogSta:"1" ,//删除逻辑  数据有效
                anhao: '' ,

                   },

            lop:{logTypeLogname:''//日志类型
        },
          files: "", fileName: "",fileList:[],lopzi:{}//详细类型下拉框
          ,   dialogVisible: false        //模态框

          }
      },

       methods: {
          to(index,row){
                this.firstlist. caseLawId=row.id
     this.firstlist. anhao=row.caseNo
            this.firstlist.clientId=row.clientId
           //  alert(row.caseNo +"\t\t"+row.id)
              this.dialogVisible=false
            //拿到客户id 去找客户名称 渲染到客户input上
            this.$http.get("/client",{params:{"id":row.clientId}}).then(res=>{
           this.client    =res.data.data[0].client

            })




          },
          //分页
   // 初始页currentPage、初始每页数据数pagesize和数据data
   handleSizeChange: function (size) {
                this.gaocha.pageSize = size;
                console.log(this.gaocha.pageSize)  //每页下拉显示数据
                this.GetLogJob()
        },
        handleCurrentChange: function(currentPage){
                this.gaocha.currentPage = currentPage;
                console.log(this.gaocha.currentPage)  //点击第几页
                this.GetLogJob()
        },
         //一级菜单 渲染2级菜单
         fuzi(){
           this.$http.post("/logJob/xuanranerji",{"logtypeId":this.logtypeId}).then(res=>{
                             this.lopzi=res.data.data
           })
         },
            //文件上传
            beforeUpload(file){//文件上传之前
        this.files=file;
        this.fileName=file.name;
    },
            handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          handlePreview(file) {
            console.log(file);
          },
          handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
          },
          beforeRemove(file, fileList) {
            console.log(fileList);
            return this.$confirm(`确定移除 ${ file.name }?`);
          },
          //提交文件
          submitUpload(){
        if (this.files.size / 1024  >500) {
          this.$message.error('错误提示：请上传小于500kb的文件')
            return false
        }
        let fileFormData = new FormData();
        fileFormData.append('file', this.files, this.fileName);//file是键，files是值，就是要传的文件，fileName是要传的文件名
        let requestConfig = {
            headers: {
                'Content-Type': 'multipart/form-data'
            },
        };
        this.$http.post("/file",fileFormData,requestConfig)
        .then(res=>{
          this.firstlist.joblogFile=res.data.data})
          },
    //文件上传结束
    //提交
        onSubmit(){

       this.$http.put("/logJob/tianjia",this.firstlist).then(res=>{
         if(20000==res.data.status){
             this.$message({
          message: '添加成功',
          type: 'warning'
        })
           this.$router.push("logjob")
    }
         else{ alert('添加失败')}

         })
        },
        //开始时间减去结束时间  =自报时间
        shijian(){
          //开始时间
          var sta=new Date(this.firstlist.joblogStarttime).getTime();
          //结束时间
              var end=new Date(this.firstlist.joblogEnddtime).getTime();

                 //自报时间joblogReportedtime
                  this.firstlist.joblogReportedtime=Math.floor((end-sta)/1000/60/60)
        },
        //拿儿子渲染爹
        funs(){
 this.$http.post('/logJob/rizhileixing', { 'logTypePid':null})
                .then(res =>{  this.lop=res.data.data
              console.log(this.lop);
                })
          },
          //案件模态框 点击右上角的x按钮触发
          handleClose(done) {
        this.$confirm('确认关闭？')
          .then(res=> {
            done();
            console.log(res)
          })
          .catch(res => {
                console.log(res);
          });
      },
            GetLogJob(){
        this.$http.post('/logJob/anjianchaxun',this.gaocha)
        .then(res =>{this.tableData=res.data.data.list
          //总条数
        this.total=  res.data.data.total


 //console.log(this.tableData);
      })

  },
      //高级查询
    gaojijiansuo(){
    this.GetLogJob();
    }

      },created(){
          this.funs();
           this.GetLogJob();
      }
    }
    </script>

    <style scoped>
    span{
      color: red;
    }

    </style>